import styles from './card.less';

export default function ProductCard(props) {
  const addClick = () => {
    props.addClick(props)
  }
  return (
    <div className={styles.cardHome}>
      <div className={styles.cardImg}>
        <img src={`./productsimg/${props.sku}-1-cart.webp`} width={'100%'}></img>
      </div>
      <div className={styles.cardCon}>
        <div className={styles.title}>{props.title}</div>
        <div className={styles.format}>
          <div>
            <span style={{marginRight: '5px'}}>{props.currencyFormat}</span>
            <span style={{fontSize: '23px'}}>{Math.trunc(props.price)}</span>
            <span style={{fontSize: '14px'}}>.{props.price.toFixed(2).toString().split('.')[1]}</span>
          </div>
          <div className={styles.installments}>or {props.installments} x {props.currencyFormat}{(props.price/props.installments).toFixed(2)}</div>
        </div>
      </div>
      <div className={styles.bottomBtn} onClick={addClick}>
        <span>Add to cart</span>
      </div>
    </div>
  );
}
